/**
 * AddressDialog
 */

 var React = require("react");
 var tool = require("../../../util/tool");
 var AddressDialog = React.createClass({
    getInitialProps: function (){
        return {
            root: {},
            data: {}
        }
    },
    getInitialState: function (){
        return {
            province: "",
            city: "",
            target: "",
            lat: "",
            lng: "",
            isInvalid: true
        }
    },
    componentWillMount: function (){
        this.iframe = this.getIframe();
        this.iframe.on('load',
            function () {
                this.gmapPicker = this.iframe[0].contentWindow.gmapPicker;
                this.geocode = this.iframe[0].contentWindow.geocode;
                this.gMapDistrictSearch = this.iframe[0].contentWindow.gMapDistrictSearch;
                this.dynamicCity = this.iframe[0].contentWindow.dynamicCity;
                this.locate_CallBack = this.iframe[0].contentWindow.locate_CallBack;
                this.gmap = this.iframe[0].contentWindow.gmap;
                this.iframe[0].contentWindow.locateCallback = this.locateCallback;
                this.iframe[0].contentWindow.geoCallback = this.geocoder_CallBack;
                this.initGeocode();
                this.gMapDistrictSearch('country', '中国', this.initProvince);
                this.geocode({
                    address: "" + this.address.province + this.address.city + this.address.target
                });
                // 创建省市下拉列表
                this.iframe[0].contentWindow.dynamicSelect(this.refs.province, this.refs.city, this);
            }.bind(this)
        );

        var data = this.props.data.action;
        if (tool.isEmptyObject(data)){
            data = {
                province: '',
                city: '',
                target: ''
            };
        }

        if (data.province && data.city && data.target){
            data["isInvalid"] = false;
        }

        this.address = data;
        this.setState(data);
    },
    componentDidMount: function (){
        this.initElements();
        this.iframe.appendTo(this.elements.gmappicker);
    },
    initElements: function (){
        this.elements = {
            gmappicker: $(this.refs.gmappicker),
            province: $(this.refs.province),
            city: $(this.refs.city),
            address: $(this.refs.address)
        };
    },
    // 右键定位
    locateCallback: function (details){
        var province = details.province,
            city = details.city,
            address = details.target,
            lat = details.lat,
            lng= details.lng;
        var param = {
            province: province,
            city: city,
            target: address,
            isInvalid: false,
            lat:lat,
            lng:lng,
        };

        var me = this;
        this.dynamicCity(province, this.refs.city, function (){
            me.setState(param);
        });
    },
    geocoder_CallBack: function(details){
        if (details){
            var data = details.geocodes[0];
            if (data){
                var location = data.location;
                var lat = location.lat,
                    lng = location.lng;
                this.setState({
                    lat: lat,
                    lng: lng
                });
                this.locate_CallBack(location);
            }
        }
    },
    initGeocode: function (){

    },
    initProvince: function (){

    },
    initCity: function (){

    },
    getIframe: function (){
        return $('<iframe>').attr({
            src: window.is.CONST.urls.gmap,
            width: '600',
            height: '400',
            frameborder: 0,
            allowtransparency: 1
        });
    },
    handleOnAddressChanged: function (type, e){
        var node = $(e.target), isSelect = node.is("select"), value = node.val();

        if (!isSelect){
            // 过滤特殊符号
            value = value.replace(/[!@#$%^&*()-+{}\[\];:'"！，。<>?,./]+/gi, "");
        }

        this.address[type] = value;

        var param = {};
        param[type] = value;

        if (this.address.province && this.address.city && this.address.target){
            param["isInvalid"] = false;
        }

        this.setState(param);
    },
    handleOnLocateAddress: function (){
        var province = this.address.province,
            city = this.address.city,
            address = this.address.target;
        this.geocode({
            address: "" + province + city + address
        });
    },
    handleOnSubmit: function (){
        var data = this.props.data;

        data.action.province = this.state.province;
        data.action.city = this.state.city;
        data.action.target = this.state.target;

        var root = this.props.root;
        root.closeDialog();
        root.updateSpecifyWidget(data);
    },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.closeDialog();
    },
    render: function (){
        var rStyle = {
            position: "fixed",
            top: "50%",
            left: "50%",
            width: "670px",
            height: "auto",
            marginLeft: "-335px",
            marginTop: "-335px",
            display: "block",
            borderRadius: '5px',
            overflow: 'hidden'
        };
        return (
            <dialog ref="dialog" style={rStyle} className="btg-modal widget-form">
                <div className="btg-modal-content location-region">
                    <div className="form-horizontal">
                        <div className="widget-form-title">
                            <label>{$._("Add position")}</label>
                        </div>
                        <div className="form-group">
                            <select onChange={this.handleOnAddressChanged.bind(this, "province")} ref="province" name="province" value={this.state.province} className="form-control province"></select>
                            <select onChange={this.handleOnAddressChanged.bind(this, "city")} ref="city" name="city" value={this.state.city} className="form-control city">
                                <option value="">{$._("Please choose")}</option>
                            </select>
                        </div>
                        <div className="form-group">
                            <input onChange={this.handleOnAddressChanged.bind(this, "target")} ref="address" name="target" type="text" value={this.state.target} className="form-control address" placeholder={$._('enter detail address')} />
                            <button onClick={this.handleOnLocateAddress} type="button">{$._("Search")}</button>
                        </div>
                        <div className="form-group">
                            <div className="gmap-tip">{$._('click on the map to choose position')}</div>
                            <div ref="gmappicker" className="gmap-gmappicker"></div>
                        </div>
                        <div className="form-group buttons">
                            <button disabled={this.state.isInvalid} onClick={this.handleOnSubmit} type="button">{$._("Confirm")}</button>
                        </div>
                    </div>
                </div>
                <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
 });

 module.exports = AddressDialog;
